<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>扇形菜单</title>
  </head>
  <style>
    .menus {
      position: relative;
      top: 200px;
      left: 400px;
      width: 400px;
      height: 400px;
      overflow: hidden;
      outline: 1px solid red;
    }
    .menus-one {
      transform-origin: 0 0;
      transition: 1s;
      transform: rotate(90deg);
    }
    .menus-one-menu {
      position: absolute;
      display: block;
      width: 100px;
      padding-left: 100px;
      font: bold 12px/50px arial, sans-serif;
      height: 200px;
      background: #ddd;
      border-radius: 0 0 200px 0;
    }
    .menus-one > div {
      transform-origin: 0 0;
      transform: rotate(90deg);
    }
    .menus-one > div:nth-child(1) {
      background: #888;
      transform: rotate(0deg);
    }
    .menus-one > div:nth-child(2) {
      background: #999;
      transform: rotate(22.5deg);
    }

    .menus-one > div:nth-child(3) {
      background: #aaa;
      transform: rotate(45deg);
    }
    .menus-one > div:nth-child(4) {
      background: #bbb;
      transform: rotate(67.5deg);
    }
    .menus:hover .menus-one {
      transition: 1s;
      transform: rotate(0deg);
    }
  </style>
  <body>
    <div id="app">
      <button class="btn">菜单</button>
      <div class="menus">
        <div class="menus-one">
          <div class="menus-one-menu" v-for="item in menusList">
            {{item.name}}
            <div class="menus-two">
              <div v-for="j in item.children" class="menus-two-menu">
                {{j.name}}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <script>
      var app = new Vue({
        el: "#app",
        data() {
          return {
            menusList: [
              {
                id: 1,
                name: "一级菜单1",
                children: [
                  { id: "1-1", name: "1-1" },
                  { id: "1-2", name: "1-2" },
                  { id: "1-3", name: "1-3" },
                  { id: "1-4", name: "1-4" },
                ],
              },
              {
                id: 2,
                name: "一级菜单2",
                children: [
                  { id: "2-1", name: "2-1" },
                  { id: "2-2", name: "2-2" },
                  { id: "2-3", name: "2-3" },
                  { id: "2-4", name: "2-4" },
                ],
              },
              {
                id: 3,
                name: "一级菜单3",
                children: [
                  { id: "3-1", name: "3-1" },
                  { id: "3-2", name: "3-2" },
                  { id: "3-3", name: "3-3" },
                  { id: "3-4", name: "3-4" },
                ],
              },
              {
                id: 4,
                name: "一级菜单4",
                children: [
                  { id: "4-1", name: "4-1" },
                  { id: "4-2", name: "4-2" },
                  { id: "4-3", name: "4-3" },
                  { id: "4-4", name: "4-4" },
                ],
              },
            ],
          };
        },
      });
    </script>
  </body>
</html>
